<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入jq -->
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <!-- 引入utils -->
    <script src="../../static/js/utils.js"></script>
    <!-- 引入vue -->
    <script src="../../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-row{
            text-align: center;
        }
        .select-input{
            width: 160px;
        }
        .el-table ::-webkit-scrollbar {
            width: 0.5px;
            height: 8px;
        }

        .el-table ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 6px;
            background-color: #b1b1b1;
        }

        .el-table ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            background: #ffffff;
            border-radius: 6px;
        }

        .el-col{
            text-align: left;
        }
        .update-input{
            width: 215px;
        }

        .resizeNone{
            .el-textarea__inner{ /*el_input中的隐藏属性*/
            resize: none;  /*主要是这个样式*/
            }

        }

    </style>
</head>
<body>
    <div id="app">
        <el-row>
            <el-form :inline="true" :model="queryCondition" class="demo-form-inline">
                <el-form-item label="客户名称">
                    <el-input v-model="queryCondition.clientname" class="select-input" size="medium" placeholder="客户名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="queryCondition.linkman" class="select-input" size="medium" placeholder="联系人" clearable></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="queryCondition.type" class="select-input" size="medium" placeholder="请选择类型" clearable >
                        <el-option label="大型客户" value="大型客户"></el-option>
                        <el-option label="中型客户" value="中型客户"></el-option>
                        <el-option label="小型客户" value="小型客户"></el-option>
                        <el-option label="新客户" value="新客户"></el-option>
                        <el-option label="老客户" value="老客户"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getList()">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <el-table :data="dataList" height="390" style="width: 100%;">
            <el-table-column prop="id" label="序号" fixed align="center" width="60"></el-table-column>
            <el-table-column prop="clientnumber" label="客户编号" align="center" width="130"></el-table-column>
            <el-table-column prop="clientname" label="客户名称" align="center" width="120"></el-table-column>
            <el-table-column prop="linkman" label="联系人" align="center" width="120"></el-table-column>
            <el-table-column prop="phonenumber" label="电话号码" align="center" width="150"></el-table-column>
            <el-table-column prop="postalcode" label="邮政编码" align="center" width="120"></el-table-column>
            <el-table-column prop="province" label="省份" align="center" width="150"></el-table-column>
            <el-table-column prop="type" label="类型" align="center" width="150"></el-table-column>
            <el-table-column prop=""  align="center" label="详细信息" width="100">
                <template slot-scope="scope">
                    <el-link type="primary"  @click="detailedMessage(scope.row)">详细信息</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="" align="center" fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <el-link type="primary" @click="openUpdateDialog(scope.row)">修改</el-link>
                    <el-link type="danger" @click="deleteClient(scope.row)" style="margin-left: 8px">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                style="margin-top: 10px"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog title="客户的详细信息" :visible.sync="dialogTableVisible" width="80%">
            <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item label="客户编号">{{formData.clientnumber}}</el-descriptions-item>
                <el-descriptions-item label="客户名称">{{formData.clientname}}</el-descriptions-item>
                <el-descriptions-item label="简称">{{formData.shortcut}}</el-descriptions-item>
                <el-descriptions-item label="客户经理">{{formData.clientmanager}}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{formData.linkman}}</el-descriptions-item>
                <el-descriptions-item label="电话号码">{{formData.phonenumber}}</el-descriptions-item>
                <el-descriptions-item label="邮政编码">{{formData.postalcode}}</el-descriptions-item>
                <el-descriptions-item label="客户地址">{{formData.clientaddress}}</el-descriptions-item>
                <el-descriptions-item label="电子邮箱">{{formData.email}}</el-descriptions-item>
                <el-descriptions-item label="开户银行">{{formData.openbank}}</el-descriptions-item>
                <el-descriptions-item label="银行账号">{{formData.bandnumber}}</el-descriptions-item>
                <el-descriptions-item label="税号">{{formData.taxnumber}}</el-descriptions-item>
                <el-descriptions-item label="省份">{{formData.province}}</el-descriptions-item>
                <el-descriptions-item label="类型">{{formData.type}}</el-descriptions-item>
                <el-descriptions-item label="备注">{{formData.remark}}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>

        <el-dialog title="修改客户信息" :visible.sync="dialogFormVisible" :before-close="handleClose" width="75%">
            <el-form :model="clientForm" :rules="rules" ref="ruleForm" label-width="90px" size="2">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="客户编号:">
                            <el-input v-model="clientForm.clientnumber"  class="update-input" size="medium"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户名称:" prop="clientname">
                            <el-input v-model="clientForm.clientname" class="update-input" size="medium" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="简称:">
                            <el-input v-model="clientForm.shortcut" class="update-input" size="medium" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户经理:" prop="clientmanager">
                            <el-input v-model="clientForm.clientmanager" class="update-input" size="medium" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系人:" prop="linkman">
                            <el-input v-model="clientForm.linkman" class="update-input" size="medium" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话号码:" prop="phonenumber">
                            <el-input v-model="clientForm.phonenumber" class="update-input" size="medium" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="邮政编码:" prop="postalcode">
                            <el-input v-model="clientForm.postalcode" class="update-input" size="medium" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户地址:" prop="clientaddress">
                            <el-input v-model="clientForm.clientaddress" class="update-input" size="medium" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电子邮件:" prop="email">
                            <el-input v-model="clientForm.email" class="update-input" size="medium" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开户银行:" prop="openbank">
                            <el-select v-model="clientForm.openbank" placeholder="请选择开户银行" class="update-input" size="medium">
                                <el-option label="邮政" value="邮政"></el-option>
                                <el-option label="工商" value="工商"></el-option>
                                <el-option label="农业" value="农业"></el-option>
                                <el-option label="建设" value="建设"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="银行账号:" prop="bandnumber">
                            <el-input v-model="clientForm.bandnumber" class="update-input" size="medium" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="税号:">
                            <el-input v-model="clientForm.taxnumber" class="update-input" size="medium" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="省份:">
                            <el-input v-model="clientForm.province" class="update-input" size="medium" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="类型:">
                            <el-select v-model="clientForm.type" placeholder="请选择类型" class="update-input" size="medium">
                                <el-option label="大型客户" value="大型客户"></el-option>
                                <el-option label="中型客户" value="中型客户"></el-option>
                                <el-option label="小型客户" value="小型客户"></el-option>
                                <el-option label="新客户" value="新客户"></el-option>
                                <el-option label="老客户" value="老客户"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注:">
                            <el-input type="textarea"
                                    placeholder="请输入内容"
                                    v-model="clientForm.remark"
                                    :rows="6"
                                    class="resizeNone"
                                      style="width: 585px;"
                                    maxlength="200"
                                    show-word-limit>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" style="text-align: center;">
                        <el-form-item>
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button @click="updateBtn()" type="primary">提交</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            var clientNameRules = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入客户名称'));
                } else {
                    if (value.length < 2 || value.length > 20) {
                        callback(new Error('长度在 3 到 20 个字符'));
                    }else {
                        let _this = this;
                        selectAjax("POST","/clienttable/queryByClientName",{clientName:_this.clientForm.clientname},(data)=>{
                            console.log(data.msg)
                            if (data.msg == "该客户已存在")
                                callback(new Error(data.msg));
                            else{
                                callback();
                            }
                        })
                    }
                }
            };
            return{
                dataList: [],
                total: 0,
                currentPage: 1,
                pageSize: 10,
                queryCondition: {
                    clientname: '',
                    linkman: '',
                    type: ''
                },
                dialogTableVisible: false,
                formData: {},
                clientForm: {
                    clientnumber: '', // 客户编号
                    clientname: '', // 客户名称
                    shortcut: '', // 简介
                    clientmanager: '', // 客户经理
                    linkman: '', // 联系人
                    phonenumber: '', // 电话号码
                    postalcode: '', // 邮政编码
                    clientaddress: '', // 客户地址
                    email: '', // 电子邮件
                    openbank: '', // 开户银行
                    bandnumber: '', // 银行账号
                    taxnumber: '', // 税号
                    province: '', // 省份
                    type: '', // 类型
                    remark: '' // 备注
                },
                dialogFormVisible: false,
                rules:{
                    clientname: [
                        { required: true, validator: clientNameRules, trigger: 'blur' }
                    ],
                    clientmanager: [
                        { required: true, message: '请输入客户经理', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    linkman: [
                        { required: true, message: '请输入联系人', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    phonenumber: [
                        { required: true, message: '请输入手机号码', trigger: 'blur' },
                        { required: true, pattern:/^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
                    ],
                    postalcode: [
                        { required: true, message: '请输入邮政编码', trigger: 'blur' },
                        { required: true, pattern:/[1-9]{1}(\d+){5}/, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    clientaddress: [
                        { required: true, message: '请输入客户地址', trigger: 'blur' }
                    ],
                    email: [
                        { required: true,message: '请输入邮箱地址', trigger: 'blur'  },
                        { type: 'email',pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/, message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    openbank: [
                        { required: true, message: '请选择开户银行', trigger: 'change' }
                    ],
                    bandnumber: [
                        { required: true, message: '请输入银行账号', trigger: 'blur' },
                        { required: true, pattern:/^\d{11}$/, message: '必须为11位', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            getList(){
                let _this = this;
                selectAjax("get","/clienttable/queryPrintClientLimit",{
                    "currentPage": _this.currentPage,
                    "pageSize": _this.pageSize,
                    "clientname": _this.queryCondition.clientname,
                    "linkman": _this.queryCondition.linkman,
                    "type": _this.queryCondition.type
                },function (data) {
                    _this.dataList = data.data.clienttableList;
                    _this.total = data.data.totao;
                })
            },
            detailedMessage(row){
                let _this = this;
                _this.dialogTableVisible = true;
                _this.formData = row;
            },
            openUpdateDialog(row){
                let _this = this;
                _this.dialogFormVisible = true;

                selectAjax("get","/clienttable/getById/"+row.id,{},function (data) {
                    _this.clientForm = data.data;
                })

            },
            handleClose(done) {
                this.dialogFormVisible = true;
            },
            // 修改客户信息
            updateBtn(){
                let _this = this;

                addOrUpdateAjax("put","/clienttable/update",_this.clientForm,function (data) {
                    if (data.msg == '修改成功'){
                        _this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        _this.getList();
                    }else {
                        _this.$message.error("服务器异常，请稍后重试");
                    }

                    _this.dialogFormVisible = false;
                })
            },
            // 删除该客户
            deleteClient(row){
                let _this = this;

                this.$confirm('是否要删除该信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAJAX("delete","/clienttable/deleteByid/"+row.id,{},function (data) {
                        if (data.msg == '删除成功'){
                            _this.getList();
                            _this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }else {
                            _this.$message.error("服务器异常，请稍后重试");
                        }
                    })
                }).catch(() => {
                    _this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val){
                let _this = this;
                _this.pageSize = val;
                _this.getList();
            },
            handleCurrentChange(val){
                let _this = this;
                _this.currentPage = val;
                _this.getList();
            }
        },
        mounted(){
            this.getList();
        }
    })
</script>
</html>